<template>
  <div class="app-container">
    <el-card>
      <el-space>
        <el-button type="success" :icon="Plus" @click="handleAdd"
          >新增</el-button
        >
        <el-input
          v-model="searchParams.keyStr"
          type="text"
          class="mr-8"
          placeholder="品牌名称"
          >品牌名称</el-input
        >
        <el-button type="primary" :icon="Search" @click="handleSearch"
          >搜索
        </el-button>
        <el-button type="default" plain :icon="Refresh" @click="reset"
          >重置
        </el-button>
        <el-button
          type="danger"
          plain
          :icon="Delete"
          :disabled="selections.length == 0"
          @click="handleDelete"
          >删除
        </el-button>
      </el-space>
      <el-table
        class="mt"
        :data="dataList"
        border
        style="width: 100%"
        @selection-change="handleRowSelect"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="BrandId" label="品牌ID"> </el-table-column>
        <el-table-column prop="BrandName" label="品牌名称"> </el-table-column>
        <el-table-column prop="BrandLogo" width="1000" label="LOGO">
          <template v-slot="{ row }">
            <el-image
              v-if="row.BrandLogo"
              style="width: 100px; height: 100px"
              :src="row.BrandLogo"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="SortIndex" label="顺序"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button link type="danger" @click="handleDelete(row.BrandId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination
      v-show="searchParams.total > 0"
      :total="searchParams.total"
      v-model:page="searchParams.pageNum"
      v-model:limit="searchParams.pageSize"
      @pagination="getData"
    />
    <BrandEditModal
      :open="open"
      :isUpdate="isUpdate"
      :data="currentData"
      @reload="reload"
      @closeModal="open = false"
    />
  </div>
</template>
<script setup>
import { Plus, Refresh, Search, Delete } from "@element-plus/icons-vue";
import BrandEditModal from "./components/BrandEditModal";
import {
  brandQueryApi,
  brandUpdateApi,
  brandRemoveApi,
} from "@/api/order/brand/index.js";
import { onMounted } from "vue";
import { createUniqueString } from "../../../../utils";
import { uploadImg } from "@/api/upload.js";
import { ElMessage, ElMessageBox } from "element-plus";

const open = ref(false);
const isUpdate = ref(false);
const currentData = ref({});
const loading = ref(false);
const dataList = ref([]);
const searchParams = ref({
  keyStr: "",
  pageNum: 1,
  pageSize: 10,
});
const selections = ref([]);

onMounted(async () => {
  getData();
});
async function getData() {
  loading.value = true;
  const res = await brandQueryApi(searchParams.value);
  searchParams.value.total = res.TotalCount;
  if (res.Count > 0) {
    dataList.value = res.Data;
  } else {
    dataList.value = [];
  }
  loading.value = false;
}
async function reload(data, update) {
  searchParams.value.keyStr = "";
  if (data.BrandLogo && !data.BrandLogo.includes("https://")) {
    const response = await fetch(data.BrandLogo);
    const blob = await response.blob();
    let urlResponse = await uploadImg({
      PictureType: 1,
      Name: data.BrandName,
      img: new File([blob], data.BrandImgName, {
        type: blob.type,
      }),
    });
    data.BrandLogo = urlResponse.name;
  }
  const res = await brandUpdateApi(data);
  if (res.IsSuccess) {
    ElMessage.success(update ? "修改成功" : "新增成功");
    getData();
  }
}
function handleEdit(row) {
  open.value = true;
  isUpdate.value = true;
  currentData.value = row;
}
function handleDelete(id) {
  ElMessageBox.confirm("确认删除？", "提示", {
    type: "warning",
  })
    .then(async (res) => {
      if (searchParams.value.total > 1) {
        if (typeof id == "number") await brandRemoveApi([id]);
        else await brandRemoveApi(selections.value.map((e) => e.BrandId));
        ElMessage.success("删除成功");
        getData();
      } else {
        ElMessage.warning("至少保留一条数据");
      }
    })
    .catch(() => {});
}
function handleAdd() {
  open.value = true;
  isUpdate.value = false;
  currentData.value = {};
}
function handleSearch() {
  getData();
}
function reset() {
  searchParams.value.keyStr = "";
  getData();
}
function handleRowSelect(e) {
  selections.value = e;
}
</script>
<style lang="scss" scoped>
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: transparent !important;
}
</style>